import React, {Component} from "react";
import {Button, Form, Input, Space, message} from "antd";
import {Link, history} from "umi";
import LockOutlined from "@ant-design/icons/es/icons/LockOutlined";
import MailOutlined from "@ant-design/icons/lib/icons/MailOutlined";
import {request} from "../.umi/plugin-request/request";
import {server_api} from "../util/global_config";

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 10,
        span: 14,
    },
};

export default class Login extends Component {

    handleSubmit = values => {
        request(`${server_api}/user/login`, {
            method: 'POST',
            data: values
        }).then(response => {
            if (!response || response === '') {
                message.error("账号密码错误");
                return;
            }
            history.push("/welcome", {email: response});
        });
    };

    render() {
        return (
            <div>
                <div style={{marginTop: 210}}>
                </div>
                <div align="center">
                    <Form {...layout}
                          onFinish={this.handleSubmit} name={'login'}
                          style={{maxWidth: 300}}>
                        <Form.Item label={'Email'}
                                   name={'email'}
                                   rules={[{required: true, message: 'Please input your email!'}]}>
                            <Input
                                prefix={<MailOutlined/>}
                                placeholder="Email"
                            />
                        </Form.Item>
                        <Form.Item label={'Password'} name={'password'}
                                   rules={[{required: true, message: 'Please input your password!'}]}>
                            <Input.Password
                                prefix={<LockOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
                                type="password"
                                placeholder="Password"
                            />
                        </Form.Item>
                        <Form.Item {...tailLayout}>
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    Log in
                                </Button>
                                <Link to={'/register'}>go register</Link>
                            </Space>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );

    }
}
